<template>
    <div class="login-container">
        <van-nav-bar title="商品列表" class="nav-bar" />

        
    <div>
        <h3>{{ datalist.c_name }}</h3>
        <van-grid :gutter="10" :column-num="1" >
            <van-grid-item v-for="value in datalist.goods">
                <div>项目：{{ value.name }}</div>
                <div>价格：{{ value.price }}</div>
                <div>库存：{{ value.store }}</div>
                <van-button type="primary" @click="buygoods(value.id)">购买</van-button>

            </van-grid-item>
        </van-grid>
    </div>



    </div>





</template>




<script setup>
import { ref,onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()


const c_id = route.query.c_id



const datalist = ref([])



const clickgoods = () => {
    axios.get('http://127.0.0.1:8000/goods/goodsc/?c_id='+c_id ).then(res => {
        datalist.value = JSON.parse(res.data)
    })
}




onMounted(() => {
    clickgoods()
})


const buygoods = (id) => {
    const data = {
        user_id:1,
        goods_id:id
    }
    axios.post('http://127.0.0.1:8000/goods/addcart/',data)
    .then(res => {
        console.log(res)
    })
}



</script>



<style scoped>
.login-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;
  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  overflow: auto; /* 添加滚动条 */
  scrollbar-width: none; /* Firefox */
}


</style>